<template>
  <div id="app">
    <!-- 头部 -->
    <cn-header class="header"></cn-header>
    <!-- 主体 -->
     <router-view v-if="!$route.meta.keepAlive"/>
     <!-- 路由元信息keepAlice为home组件缓存，其他的不缓存 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <!-- 尾部 -->
    <cn-footer class="footer"></cn-footer>
  </div>
</template>

<script>
// 引入自定义头部，尾部组件
import cnHeader from '@components/Header'
import cnFooter from '@components/Footer'
// 导出
export default ({
  // 组件命名
  name: 'app',
  // 注册子组件
  components: {
    cnHeader,
    cnFooter
  },
  // 视图渲染完成时候获取到body元素，设置根字号
  mounted () {
    var body = document.getElementsByTagName('body')[0]
    body.style.fontSize = '20px'
  }

})
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.header{
  width: 100%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}
.footer{
  width: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
}
body,html{
  height: 100%;
  background: pink;
}
</style>
